<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>地址管理页面</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <link rel="stylesheet" href="css/nivo-slider.css">
    <link rel="stylesheet" href="css/jquery-ui-slider.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleLens.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleGallery.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="layui/css/layui.css" media="all"></script>

</head>
<body>
<!--网页开始-->
<div id="header11"></div>
<div class="breadcurb-area">
    <div class="container">
        <ul class="breadcrumb">
            <li class="home"><a href="index.html">首页</a>
            <li>
            <li><a href="site.html">地址管理</a>
            <li>
        </ul>
    </div>
</div><!-- End Breadcurb Area -->

<div class="wishlist-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="cart-title">
                    <div class="col-md-12">
                        <input type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                               data-target="#addSite" value="添加地址">
                        <input type="button" class="btn btn-primary btn-lg" onclick="deleteSite()" value="删除地址">
                        <input type="button" class="btn btn-primary btn-lg" onclick="importSite()" value="设为默认收货地址">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="chart-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="buyerOrder" class="chart-item table-responsive fix">
                    <table id="siteTable">
                        <thead>
                        <tr>
                            <th><input type="checkbox"></th>
                            <th>收货人</th>
                            <th>收货电话</th>
                            <th>收货地址</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="color: black" v-for="(site) in sites">
                            <td><input type="checkbox" name="sid" :value="site.sid"></td>
                            <td>{{site.consignee}}</td>
                            <td>{{site.consigneeNum}}</td>
                            <td>{{site.consigneeAddress}}</td>
                            <td>
                                <template v-if="site.flage == '2'">
                                    <a style="color: red">默认收货地址</a>
                                </template>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="footer11"></div>

<div class="container">
    <!-- 添加模态框（Modal） -->
    <div class="modal fade" id="addSite" tabindex="-1" role="dialog" aria-labelledby="addSiteLabel" aria-hidden="true"
         style="color: black">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <input type="button" class="close" data-dismiss="modal" aria-hidden="true" value="&times;">
                    <h6 class="modal-title" id="addSiteLabel" style="color: black">
                        添加收货地址
                    </h6>
                </div>
                <div class="modal-body" role="form">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">收货人姓名:</label>
                            <div class="col-sm-10">
                                <input type="tel" name="addconsignee" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">收货人电话:</label>
                            <div class="col-sm-10">
                                <input type="tel" name="addconsigneeNum" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">收货人地址:</label>
                            <div class="col-sm-10">
                                <select name="addcity" onchange="showCounty()" class="dd-select">
                                    <option value="0">请选择省市</option>
                                </select>
                                <select name="addcounty" class="dd-select">
                                    <option value="0">请选择市区</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">详情:</label>
                            <div class="col-sm-10">
                                <input type="tel" name="addmore" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭">
                    <input type="button" class="btn btn-primary" onclick="addSite()" value="确认提交">
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/vendor/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/jquery.meanmenu.min.js"></script>
<script src="js/jquery-price-slider.js"></script>
<script type="text/javascript" src="js/jquery.simpleGallery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpleLens.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/dbclick.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="layui/layui.js"></script>

<script>
    $(function () {
        $('#header11').load("auction-head.html");
        $('#footer11').load('auction-footer.html');
    })

    //删除地址
    window.deleteSite = () => {
        let sids = $("input[name='sid']:checked");

        if (sids.length != 1) {
            alert("请选择一个地址");
            return;
        }
        let sid = sids.val();
        $.ajax({
            url:"../web-view/site/deleteSite",
            method:"post",
            data:{
                sid:sid
            },
            success:function (result) {
                if (result.code ==200){
                    alert("删除成功");
                    location.reload();
                }else {
                    alert("删除失败");
                }
            }
        })
    }

    //添加地址
    window.addSite = () => {
        let consignee = $("[name='addconsignee']").val();
        if (consignee == "") {
            alert("请输入收件人姓名");
            return;
        }
        if (consignee.length > 10) {
            alert("名字不能超过10个字");
            return;
        }
        let consigneeNum = $("[name='addconsigneeNum']").val();
        if (consigneeNum == "") {
            alert("请输入收件人电话");
            return;
        }
        if (consigneeNum.length > 11) {
            alert("请输入11位电话号码");
            return;
        }
        let city = $("[name='addcity']").find("option:selected").text();
        let county = $("[name='addcounty']").find("option:selected").text();
        let more = $("[name='addmore']").val();
        if (city == 0 || county == 0 || more == "") {
            alert("请完善地址");
            return;
        }
        let consigneeAddress = city + "，" + county + "，" + more + "。";
        console.log(consignee);
        console.log(consigneeNum);
        console.log(consigneeAddress);
        $.ajax({
            url: "/web-view/site/addSite",
            method: "post",
            data: {
                consignee: consignee,
                consigneeNum: consigneeNum,
                consigneeAddress: consigneeAddress
            },
            success:function (result) {
                if (result.code==200){
                    alert("添加成功");
                    /*关闭拟态框*/
                    $('#addSite').modal('hide');
                    location.reload();
                }else {
                    alert("添加失败,请联系管理员");
                }
            }
        })

        /*关闭拟态框时*/
        $('#addSite').on('hide.bs.modal', function () {
            $("[name='addconsignee']").val("");
            $("[name='addconsigneeNum']").val("");
            $("[name='addmore']").val("");
        });
    }


    //设为默认地址
    window.importSite = () => {
        let sids = $("input[name='sid']:checked");
        if (sids.length != 1) {
            alert("请选择一个地址");
            return;
        }
        let sid = sids.val();
        $.ajax({
            url:"/web-view/site/importSite",
            method:"post",
            data:{
                sid:sid,
            },
            success:function (result) {
                if (result.code ==200){
                    alert("设置成功");
                    location.reload();
                }else {
                    alert("设置失败");
                }
            }
        })
    }


    //页面渲染
    window.showSite = () => {
        $.ajax({
            url: "/web-order/site/showSite",
            method: "get",
            success: function (result) {
                siteVue.sites = result.data;
            }
        })
    }

    window.showCity = () => {
        $.ajax({
            url: "/web-order/site/city",
            method: "get",
            success: function (result) {
                let citys = result.data;
                let cityHtml = "<option value='0'>请选择省市</option>";
                for (var i = 0; i < citys.length; i++) {
                    cityHtml += "<option value='" + citys[i].cityid + "'>" + citys[i].cityname + "</option>"
                }
                $("[name='addcity']").html(cityHtml);
            }
        })
    }

    //省市-市区联动
    window.showCounty = () => {
        let cityid = $("[name='addcity']").val();
        $.ajax({
            url: "/web-order/site/county/" + cityid + "",
            method: "get",
            success: function (result) {
                let county = result.data;
                let countyHtml = "<option value='0'>请选择市区</option>";
                for (var i = 0; i < county.length; i++) {
                    countyHtml += "<option value='" + county[i].countyid + "'>" + county[i].countyname + "</option>"
                }
                $("[name='addcounty']").html(countyHtml);
            }
        })
    }

    window.onload = function () {
        showSite();
        showCity()
    }

    let siteVue = new Vue({
        el: "#siteTable",
        data: {
            sites: {}
        },
    })

</script>
</body>


</html>
